<template>
   
     <div class="admin">
         <div class="container">
              <h3>
                    <div>账号中心</div>
                    <div><el-icon @click="back"><Right /></el-icon></div>
                </h3>
              <div class="user-image">
                   <img v-if="user.imgUrl"  :src="user.imgUrl" alt="">
              </div>
              <div class="opt">
                <span class="label">账号:</span>
                <el-input v-model="user.account"  style="width: 240px" placeholder="" size="large" disabled/>
                <span class="icon"><el-icon><Edit /></el-icon></span>
              </div>
              <div class="opt">
                <span class="label">昵称:</span>
                <el-input v-model="user.nickName" style="width: 240px" placeholder="" size="large" disabled/>
                <span class="icon"><el-icon><Edit /></el-icon></span>
              </div>
              <div class="opt">
                <span class="label">邮箱:</span>
                <el-input v-model="user.email"  style="width: 240px" placeholder="" size="large" disabled/>
                <span class="icon"><el-icon><Edit /></el-icon></span>
              </div>
              <div class="opt">
                <span class="label">手机号:</span>
                <el-input v-model="user.phone" style="width: 240px" placeholder="" size="large" disabled/>
                <span class="icon"><el-icon><Edit /></el-icon></span>
              </div>
              <div class="opt">
                 <p>当前登录地址:</p>
                 <div>{{ address  }}</div>
              </div>
              <div class="opt">
                 <p>经纬度:</p>
                 <div>{{ str  }}</div>
              </div>
         </div>
     </div>
</template>
<style lang="scss" scoped>
.admin {
    background-color: #f0f0f0;
}
.container {
    width: 1200px;
    margin: 0 auto;
    background-color: #ffffff;
    min-height: 1000px;
    padding: 20px 15px;
    .opt {
        margin-top: 15px;
        display: flex;
        align-items: center;
        .label {
            display: inline-block;
            width: 150px;
            padding: 0 15px 0 0;
            text-align: right;
        }
        p {
            width: 150px;
            padding: 0 15px 0 0;
            text-align: right;
        }
        .icon {
            font-size: 24px;
            margin-left: 10px;
        }
    }
    .user-image {
        width: 150px;
        height: 150px;
        background-color: #f0f0f0;
        border-radius: 50%;
        overflow: hidden;
        margin-left: 120px;
        margin-bottom: 50px;
        img {
            width: 150px;
            height: 150px;
            border-radius: 50%;
        }
    }
    h3 {
        width: 100%;
        display: flex;
        justify-content: space-between;
        .el-icon {
            cursor: pointer;
            font-size: 24px;
            color: #666;
        }
    }
}
</style>
<script setup lang="ts">
import { ref } from 'vue';
import { getIpAdress , getAccountInfo } from '../api/request'
import api from '@/api/index';
import { useRouter } from 'vue-router'
let address = ref('')
let user = ref<any>({})
let token = localStorage.getItem("TOKEN");
let $router = useRouter();
let str = ref('');
if(token){
    getAccountInfo({token})
    .then(
        content=>{
            console.log(content)
            let {code , result} = content;
            if(code == 200) {
                let arr = result.map((item: any)=>{
                    item.imgUrl = api.url+item.imgUrl;
                    return item;
                })
                user.value = arr[0];
            }
        }
    )
}

getIpAdress()
.then(
    content=>{
        // console.log(content);
        let {status,city , country, lat, lon,query ,regionName} = content;
        if(status == "success"){
            address.value = `${country}-${regionName}-${city} IP:${query}`
            str.value = `${lon},${lat}`
        }
    }
)

const back = ()=> {
    $router.go(-1)
}
</script>